<template>
  <el-container>
    <!--            头部内容-->
    <el-header>
      <div>
        <span @click="titleBut" class="headerText">后台管理系统</span>
        <!-- <el-dropdown style="position: absolute;right: 30px;top: 15px"  @command="handleCommand">
          <el-button circle>
            <i class="el-icon-setting iconStyle"></i>
          </el-button> -->
          <!-- <el-dropdown-menu slot="dropdown" split-button="true">
            <el-dropdown-item command="1">个人信息</el-dropdown-item>
            <el-dropdown-item command="2">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
      </div>
    </el-header>
    <el-container style="height: 100vh;">
      <el-aside width="180px" style="height: 100%;background-color: white;text-align: left;">
        <!-- 菜单组件 -->
        <el-menu collapse-transition>
          <el-menu-item index="1" style="text-indent:42px">
            <span>首页</span>
          </el-menu-item>
  
          <el-submenu index="2" style="text-indent:25px">
            <template slot="title">
              <span>抽奖管理</span>
            </template>
            <el-menu-item-group>
              <router-link to="/activity">
                <el-menu-item style="text-indent:42px">
                  <span>活动管理</span>
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3" style="text-indent:25px">
            <template slot="title">
              <span>订单管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item style="text-indent:42px">
                <span>提交订单</span>
              </el-menu-item>
              <el-menu-item style="text-indent:42px">
                <span>后台订单</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4" style="text-indent:25px">
            <template slot="title">
              <span>系统管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item style="text-indent:42px">
                <span>用户管理</span>
              </el-menu-item>
              <el-menu-item style="text-indent:42px">
                <span>网站管理</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main style="margin-bottom: 50px">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "Main",
  data(){
    return{
      menus:[]
    }
  },
  methods:{  
  },
  watch:{
  },
  created() {
   
  }
}
</script>

<style  lang="css" scoped>
.el-header {
  display: flex;
  justify-content: space-between;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background: linear-gradient(to right, #2ebf91, #8360c3);
}
.el-header .headerText{
  height: 20px;
  width: 170px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-top: 15px;
}
.el-main {
  background-color: rgb(238, 241, 246);
}


</style>